<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>运动练习</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="css/light7.min.css">
    <!--<link rel="stylesheet" href="./css/sm.min.css">-->
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/nav-bottom.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="css/video.js.css" />
    <link rel="stylesheet" href="css/myvideo.css">

    <link rel="stylesheet" href="./css/stylesheets/style.css">
    <script src="./js/jquery-1.7.2.min.js"></script>

</head>
<body>
<div class="page-group">
    <div class="page page-current">
        <header class="bar bar-nav">
            <a class="left bar-nav-mt1 back" href="#">
                <img src="./img/back.png" alt="">
            </a>
            <h2 class="title color-white">运动练习</h2>
            <a href="#" class="right bar-nav-mt2 right-more">
                <img src="./img/more.png" alt="">
            </a>
            <div class="more-setting" tabindex="-1">
                <div id="triangle-up"></div>
                <div class="more-setting-div">
                    <a href="#" class="more-setting-div-content">
                        <img src="./img/right-add.png" alt="">
                        <span>
                            添加成员
                        </span>
                    </a>
                    <a href="#" class="more-setting-div-content">
                        <img src="./img/right-currency.png" alt="">
                        <span>
                            通用
                        </span>
                    </a>
                    <a href="#" class="more-setting-div-content" style="border-bottom: none">
                        <img src="./img/right-share.png" alt="">
                        <span>
                            分享
                        </span>
                    </a>
                </div>
            </div>
        </header>
        <nav class="my-bar bar-tab">
            <div class="row">
                <div class="col-25">
                    <a class="my-tab-item" href="#">
                        <div class="icon-pic my-icon-home"></div>
                        <span>首页</span>
                    </a>
                </div>
                <div class="col-25">
                    <a class="my-tab-item" href="#">
                        <div class="icon-pic my-icon-mess"></div>
                        <span>消息</span>
                    </a>
                </div>
                <div class="col-25">
                    <a class="my-tab-item" href="#">
                        <div class="icon-pic my-icon-discover"></div>
                        <span>发现</span>
                    </a>
                </div>
                <div class="col-25">
                    <a class="my-tab-item" href="#">
                        <div class="icon-pic my-icon-me"></div>
                        <span>我</span>
                    </a>
                </div>
            </div>
        </nav>

        <div class="content">
            <div class="video ">
                <div class="video-body">
                    <video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
                           controls preload="none" width="640" height="264" poster=""
                           data-setup="{'example_option':true}">
                        <source src="./resource/1.mp4" type='video/mp4' />
                        <source src="./resource/1.webm" type='video/webm' />
                        <source src="./resource/1.ogv" type='video/ogg' />
                        <track kind="captions" src="/font/demo.captions.vtt" srclang="en" label="English"></track>
                        <!-- Tracks need an ending tag thanks to IE9 -->
                        <track kind="subtitles" src="/font/demo.captions.vtt" srclang="en" label="English"></track>
                        <!-- Tracks need an ending tag thanks to IE9 -->
                    </video>
                </div>
            </div>

            <div class="time-item">
                <h3>运动时长</h3>
                <!--<span id="day_show">0天</span>-->

                <span id="hour_show">00:</span>

                <span id="minute_show">00:</span>

                <span id="second_show">10</span>

                <p>
                    <div class="p_block">
                        <img class="selpic" src="./img/ok.png" alt="">
                        <select name="music" id='music_num'>
                            <option class="music_option" value="0">
                                选择运动时播放的音乐
                            </option>
                            <option class="music_option" value="1">德国</option>
                            <option class="music_option" value="2">航鸽</option>
                        </select>
                    </div>
                </p>

                <p>
                    <a href="#" class="button button-fill botton-music botton-gray btn-start">
                        开始运动
                    </a>
                </p>
            </div>

            <div id="player" style="display: none;">
                <div class="cover"></div>
                <div class="ctrl">
                    <div class="control">
                        <div class="icon-controller">
                            <div class="rewind icon"></div>
                            <div class="playback icon"></div>
                            <div class="fastforward icon"></div>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="slider">
                            <div class="loaded"></div>
                            <div class="pace"></div>
                        </div>
                        <!--时间-->
                        <!--<div class="timer left">0:00</div>-->
                        <div class="right">
                            <!--重复-->
                            <!--<div class="repeat icon"></div>-->
                            <div class="shuffle icon changeicon"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="popup popup-result">
    <div class="content-block">
        <div class="popup-confirm">
            <h4>总结</h4>
            <p>
                您本次共跑步30分钟，超越了朋友圈80%的朋友。力量训练能有效地减少人摔倒的频率及骨折，继续加油吧！
            </p>

            <div class="row row-res-btn">
                <div class="col-50">
                    <p><a href="#" class="button button-fill">分享</a></p>
                </div>
                <div class="col-50">
                    <p><a href="#" class="button button-fill close-popup">关闭</a></p>
                </div>
            </div>
        </div>
    </div>
</div>

<!--<script src="js/zepto.min.js"></script>-->
<!--<script src="js/sm.min.js"></script>-->
<script src="js/my-light7.js"></script>
<script type="text/javascript" src="js/countdown.js"></script>
<script type='text/javascript' src='js/video.js'></script>
<script src="js/index.js"></script>

<!--music-->
<script src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script src="js/script.js"></script>


<script>
    videojs.options.flash.swf = "/font/video-js.swf";
</script>
<script>
   var player = videojs('video');
    // 检测播放时间
    player.on('timeupdate', function() {
        if(player.currentTime() >= 5) {
            player.pause();
            $('.video-desc').show();
        }
        //console.log(player.currentTime());
    });
    player.on('play', function() {
        console.log('开始/恢复播放');
    });
    player.on('pause', function() {
        console.log('暂停播放');
    });
    player.on('timeupdate', function() {
        if(player.duration() != 0 && player.currentTime() === player.duration()) {
            // 播放结束
        }
    });
</script>
</body>
</html>